/**
 * 资源渲染器
 * 负责渲染资源显示
 */

import { UIRenderer } from './UIRenderer.js';
import { GAME_CONFIG } from '../config/game-config.js';

export class ResourceRenderer {
    /**
     * 渲染资源面板
     * @param {Object} resourcesInfo - 资源信息
     * @param {string} containerId - 容器ID
     */
    static renderResourcePanel(resourcesInfo, containerId = 'resources-grid') {
        const container = document.getElementById(containerId);
        if (!container) return;

        UIRenderer.clearContainer(container);

        // 渲染木材
        const woodCard = this.createResourceCard(
            'wood',
            '木材',
            resourcesInfo.wood.amount,
            resourcesInfo.wood.production,
            GAME_CONFIG.ICONS.wood,
            GAME_CONFIG.COLORS.wood
        );
        container.appendChild(woodCard);

        // 渲染粮食
        const foodCard = this.createResourceCard(
            'food',
            '粮食',
            resourcesInfo.food.amount,
            resourcesInfo.food.production,
            GAME_CONFIG.ICONS.food,
            GAME_CONFIG.COLORS.food
        );
        container.appendChild(foodCard);

        // 渲染人口
        const populationCard = this.createResourceCard(
            'population',
            '人口',
            `${resourcesInfo.population.current}/${resourcesInfo.population.max}`,
            null,
            GAME_CONFIG.ICONS.population,
            GAME_CONFIG.COLORS.population
        );
        container.appendChild(populationCard);
    }

    /**
     * 创建资源卡片 - 现代化版本
     * @param {string} id - 资源ID
     * @param {string} name - 资源名称
     * @param {number|string} amount - 资源数量
     * @param {number|null} production - 生产速率
     * @param {string} icon - 图标类名
     * @param {string} color - 颜色
     * @returns {HTMLElement} 资源卡片元素
     */
    static createResourceCard(id, name, amount, production, icon, color) {
        const card = document.createElement('div');
        card.className = 'resource-card-compact';

        // 创建图标
        const iconDiv = document.createElement('div');
        iconDiv.className = 'resource-icon-compact';
        iconDiv.style.background = `linear-gradient(135deg, ${color} 0%, ${color}CC 100%)`;
        iconDiv.style.boxShadow = `0 4px 12px ${color}40`;
        iconDiv.innerHTML = `<i class="fa ${icon}" style="color: white;"></i>`;

        // 资源名称
        const nameDiv = document.createElement('div');
        nameDiv.className = 'resource-label';
        nameDiv.textContent = name;

        // 资源数量
        const amountDiv = document.createElement('div');
        amountDiv.className = 'resource-amount';
        amountDiv.id = `${id}-amount`;
        amountDiv.textContent = typeof amount === 'number' ?
            UIRenderer.formatNumber(amount) : amount;

        // 生产速率显示
        if (production !== null) {
            const formatted = UIRenderer.formatResourceChange(production);
            const productionDiv = document.createElement('div');
            productionDiv.className = `resource-production ${production >= 0 ? 'positive' : 'negative'}`;
            productionDiv.textContent = `${formatted.text}/h`;

            card.appendChild(iconDiv);
            card.appendChild(nameDiv);
            card.appendChild(amountDiv);
            card.appendChild(productionDiv);
        } else {
            card.appendChild(iconDiv);
            card.appendChild(nameDiv);
            card.appendChild(amountDiv);
        }

        UIRenderer.addFadeInAnimation(card);
        return card;
    }

    /**
     * 更新单个资源显示
     * @param {string} resourceId - 资源ID
     * @param {number|string} newAmount - 新数量
     */
    static updateResourceAmount(resourceId, newAmount) {
        const amountElement = document.getElementById(`${resourceId}-amount`);
        if (amountElement) {
            const displayValue = typeof newAmount === 'number' ?
                UIRenderer.formatNumber(newAmount) : newAmount;
            amountElement.textContent = displayValue;
        }
    }
}
